<template>
    <section class="area_manage">
  			<p class="form1">
  			  <el-button type="primary"  icon="el-icon-circle-plus-outline" @click='add'>注册区域</el-button>
  			   <el-button type="primary"  style="float: right;" @click= "search">搜索</el-button>
  			  <el-input v-model="form.name" placeholder="请输入内容" style="width: 130px;float: right;"></el-input>
  			</p>
        
        	<table-diy :tableTitle="tableTitle" :tableData="tableData"
        		 @detail="detailTable"
        		 @del = "del"
        		 @handleCurrentChange = "handleCurrentChange"
        		 @peizhi="peizhi"
        		 @updata="updataTable"></table-diy>
        	
        	<el-dialog
			  :title="titleDiy"
			  :visible.sync="dialogVisible1"
			  width="50%"
			  class="diy-dialog"
			  :append-to-body=true
			 >
			 <form-origin 
			 	:type="dialog1Type" 
			 	:content = "currentPage" 
			 	:formData="formData" 
			 	:formLabel="formLabel"
			 	@insertData = "insertData"
			 	@emitSelectWangduan = "emitSelectWangduan"
			 	></form-origin>
			 </el-dialog>
    </section>
</template>

<script>
    import tableDiy from './components/tableDiy'
    import formOrigin from './components/formOrigin'

    export default {
    	components:{
    		tableDiy,
    		formOrigin
    	},
        data() {
          return {
          		dataOriginId:0,
          		currentPage:'dataOrigin',
          		titleDiy:'',
          		dialog1Type:'',
          		dialogVisible1:false,
          		form:{
          			name:'',
          			pageNum:1,
          			pageSize:10
          		},
          		tableData: [
          			{
          				name:'132',
			        	typeName:'ad2d1',
			        	areName:'dwadwa',
			        	createDate:'5G',
			        	cpu:'8核',
			        	disket:'300G',
          			},
          			{
          				name:'132',
			        	typeName:'ad2d1',
			        	areName:'dwadwa',
			        	createDate:'5G',
			        	cpu:'8核',
			        	disket:'300G',
          			}
          		],
		        tableTitle:{
		        	name:'区域名称',
		        	typeName:'区域标识',
		        	areName:'所属网段',
		        	createDate:'内存',
		        	cpu:'cpu',
		        	disket:'硬盘',
		        },
		        formLabel:[],
		        formAdd:[
		        	{
		        		show:'normal',
		        		label:'区域名称',
		        		placehold:'请输入区域名',
		        		type:'input',
		        		diyWidth:'350px',
		        		modelData:"name",
		        		inputAfter:' ',
		        	},
		        	{
		        		show:'normal',
		        		label:'区域标识',
		        		placehold:'请输入区域标识',
		        		type:'input',
		        		diyWidth:'350px',
		        		modelData:"code",
		        		inputAfter:' ',
		        	},
		        	{
		        		show:'normal',
		        		label:'内存总量',
		        		placehold:'',
		        		type:'input',
		        		diyWidth:'150px',
		        		modelData:"namgrgde",
		        		inputAfter:' G',
		        	},
		        	{
		        		show:'normal',
		        		label:'磁盘大小',
		        		placehold:'',
		        		type:'input',
		        		diyWidth:'150px',
		        		modelData:"qwerq",
		        		inputAfter:' G',
		        	},
		        	{
		        		show:'normal',
		        		label:'CPU总数',
		        		placehold:'',
		        		type:'input',
		        		diyWidth:'150px',
		        		modelData:"gesges",
		        		inputAfter:' 核',
		        	},
		        	{
		        		show:'normal',
		        		label:'所属网段',
		        		placehold:'',
		        		type:'radioGroup',
		        		modelData:"dawdaw",
		        		inputAfter:' ',
		        		radios:[
		        			{
		        				name:'公安网',
		        				value:"1"
		        			},
		        			{
		        				name:'互联网子平台',
		        				value:"2"
		        			},
		        			{
		        				name:'互联网',
		        				value:"3"
		        			},
		        			{
		        				name:'对外专用链路',
		        				value:"4"
		        			},
		        			{
		        				name:'vpn专用链路',
		        				value:"5"
		        			}
		        		],
		        	},
		        ],
		        formPeizhi:[
		        	{
		        		show:'normal',
		        		label:'请选择通道的负载均衡策略',
		        		placehold:'',
		        		type:'radioGroup',
		        		modelData:"dawdaw",
		        		inputAfter:' ',
		        		radios:[
		        			{
		        				name:'随机方式',
		        				value:"1"
		        			},
		        			{
		        				name:'轮询方式',
		        				value:"2"
		        			},
		        			{
		        				name:'权重策略',
		        				value:"3"
		        			},
		        		],
		        	},
		        	{
		        		show:'normal',
		        		label:'通道1',
		        		placehold:'请输入通道权重值',
		        		type:'input',
		        		diyWidth:'150px',
		        		modelData:"gesges",
		        		inputAfter:' ',
		        	},
		        	{
		        		show:'normal',
		        		label:'通道2',
		        		placehold:'请输入通道权重值',
		        		type:'input',
		        		diyWidth:'150px',
		        		modelData:"ges3ges",
		        		inputAfter:' ',
		        	},
		        	{
		        		show:'normal',
		        		label:'通道3',
		        		placehold:'请输入通道权重值',
		        		type:'input',
		        		diyWidth:'150px',
		        		modelData:"daada",
		        		inputAfter:' ',
		        	},
		        ],
		        formData:[
		        	{
		        		label:'数据源名称',
		        		value:'',
		        	},
		        	{
		        		label:'类型',
		        		value:'',
		        	},
		        	{
		        		label:'所属区域',
		        		value:'',
		        	},
		        	{
		        		label:'数据库类型',
		        		value:'',
		        	},
		        	{
		        		label:'数据库版本',
		        		value:'',
		        	},
		        	{
		        		label:'数据库地址',
		        		value:'',
		        	},
		        	{
		        		label:'数据库名称',
		        		value:'',
		        	},
		        	{
		        		label:'描述',
		        		value:'',
		        	},
		        	{
		        		label:'测试结果',
		        		value:'',
		        	},
		        ],
		        dataType:["","csv文件","mysql5.7","oracle11","xml文件","json文件"],
          };
        },
        methods: {
        	add(){
        		this.dataOriginId = 0;
        		this.titleDiy = '注册区域'
        		this.dialog1Type = 'add';
        		this.formLabel = this.formAdd;
        		this.dialogVisible1 = true;
        	},
        	detailTable(scope){/*tabel的详情*/
        		console.log(scope);
        		this.titleDiy = '详情页面'
        		this.dialog1Type = 'detail';
        		this.dialogVisible1 = true;
        	},
        	updataTable(scope){/*table的修改*/
        		console.log(scope);
        		this.dataOriginId = scope.row.id;
        		this.titleDiy = '修改数据源'
        		this.dialog1Type = 'updata';
        		this.dialogVisible1 = true;
        	},
        	search(){
        	},
        	del(scope){
        	},
        	insertData(val){/*插入到数据库*/
        		console.log(val);
        	},
        	handleCurrentChange(val){
        		console.log(val);
        		this.form.pageNum = val;
        		this.search();
        	},
        	emitSelectWangduan(val){
        	},
        	peizhi(val){
        		console.log(val);
        		this.dataOriginId = val.row.id;
        		this.titleDiy = '策略配置'
        		this.dialog1Type = 'add';
        		this.formLabel = this.formPeizhi;
        		this.dialogVisible1 = true;
        	}
        },
        mounted(){
        	this.search();
//      	componentGetArea(this,{segment:53});
        }
  };
</script>

<style>
	.area_manage .form1{
		margin: 10px;
	    border-bottom: dashed 1px #a7a4a4;
	    padding-bottom: 25px;
	}
@keyframes dialog-fade-in {
  0% {
    transform: translate3d(100%, 0, 0);
    opacity: 0;
  }
  100% {
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}
@keyframes dialog-fade-out {
  0% {
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
  100% {
    transform: translate3d(100%, 0, 0);
    opacity: 0;
  }
}   
</style>